<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
  <head>
    <th:block th:replace="~{/_include/header}" />
    <meta name="page-help" content="https://getrebuild.com/docs/admin/entity/#%E5%AD%97%E6%AE%B5%E7%AE%A1%E7%90%86" />
    <title>[[${bundle.L('字段管理')}]]</title>
  </head>
  <body>
    <div class="rb-wrapper rb-fixed-sidebar rb-collapsible-sidebar rb-collapsible-sidebar-hide-logo rb-aside rb-color-header" th:classappend="${sideCollapsedClazz}">
      <th:block th:replace="~{/_include/nav-top}" />
      <th:block th:replace="~{/_include/nav-left-admin(active='entities')}" />
      <div class="rb-content">
        <aside class="page-aside">
          <div class="rb-scroller-aside rb-scroller">
            <div class="aside-content">
              <div class="content">
                <div class="aside-header">
                  <button class="navbar-toggle collapsed" type="button"><span class="icon zmdi zmdi-caret-down"></span></button>
                  <span class="title">[[${entityLabel}]]</span>
                  <p class="description">[[${comments}]]</p>
                </div>
              </div>
              <div class="aside-nav collapse">
                <ul class="nav">
                  <li><a href="base">[[${bundle.L('基本信息')}]]</a></li>
                  <li><a href="form-design">[[${bundle.L('表单设计')}]]</a></li>
                  <li class="active"><a href="fields">[[${bundle.L('字段管理')}]]</a></li>
                  <li><a href="advanced">[[${bundle.L('高级配置')}]]</a></li>
                </ul>
              </div>
            </div>
          </div>
        </aside>
        <div class="main-content container-fluid">
          <div class="card card-table">
            <div class="card-body">
              <div class="dataTables_wrapper container-fluid">
                <div class="row rb-datatable-header">
                  <div class="col-sm-6">
                    <div class="dataTables_filter">
                      <div class="input-group input-search">
                        <input class="form-control" type="text" th:placeholder="${bundle.L('查询')}" maxlength="40" />
                        <span class="input-group-btn">
                          <button class="btn btn-secondary" type="button"><i class="icon zmdi zmdi-search"></i></button>
                        </span>
                      </div>
                    </div>
                  </div>
                  <div class="col-sm-6">
                    <div class="dataTables_oper">
                      <button class="btn btn-primary btn-space J_new-field" type="button"><i class="icon zmdi zmdi-plus"></i> [[${bundle.L('添加')}]]</button>
                      <button class="btn btn-primary btn-space J_new2-field bosskey-show" type="button"><i class="icon zmdi zmdi-plus"></i> [[${bundle.L('批量添加')}]]</button>
                    </div>
                  </div>
                </div>
                <div class="row rb-datatable-body">
                  <div class="col-sm-12">
                    <div class="rb-loading rb-loading-active data-list">
                      <table class="table table-hover table-striped tablesort" id="dataList">
                        <thead>
                          <tr>
                            <th width="25%" data-filed="fieldLabel">[[${bundle.L('字段名称')}]]</th>
                            <th width="16%" data-field="fieldName">[[${bundle.L('内部标识')}]]</th>
                            <th width="16%" data-field="displayType">[[${bundle.L('类型')}]]</th>
                            <th data-field="comments">[[${bundle.L('备注')}]]</th>
                            <th width="50" class="no-sort"></th>
                          </tr>
                        </thead>
                        <tbody></tbody>
                      </table>
                      <th:block th:replace="~{/_include/spinner}" />
                    </div>
                  </div>
                </div>
                <div id="pagination">
                  <div class="row rb-datatable-footer">
                    <div class="col-sm-3"><div class="dataTables_info"></div></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <th:block th:replace="~{/_include/footer}" />
    <script th:src="@{/assets/lib/jquery.tablesort.min.js}"></script>
    <script>
      window.__PageConfig = {
        entityName: '[[${entityName}]]',
        nameField: '[[${nameField}]]',
        isSuperAdmin: '[[${isSuperAdmin}]]' === 'true',
      }
    </script>
    <script th:src="@{/assets/js/metadata/entity-switch.js}" type="text/babel"></script>
    <script type="text/babel">
      const wpc = window.__PageConfig
      $(document).ready(() => {
        loadFields()

        $('.input-search .btn').on('click', () => renderList())
        $('.input-search .form-control').keydown((e) => {
          if (e.which === 13) $('.input-search .btn').trigger('click')
        })
        $('.J_new-field').on('click', () => {
          if (wpc.isSuperAdmin) RbModal.create(`/p/admin/metadata/field-new?entity=${wpc.entityName}`, $L('添加字段'))
          else RbHighbar.error($L('仅超级管理员可添加字段'))
        })
        $('.J_new2-field').on('click', () => {
          if (wpc.isSuperAdmin) RbModal.create(`/p/admin/metadata/field-new2?entity=${wpc.entityName}`, $L('批量添加字段'), { width: 1064 })
          else RbHighbar.error($L('仅超级管理员可添加字段'))
        })
      })

      let fields_data = []
      const loadFields = function () {
        $.get(`../list-field?entity=${wpc.entityName}&refname=true`, function (res) {
          fields_data = res.data || []
          renderList()

          $('.tablesort').tablesort()
        })
      }

      const renderList = function () {
        const $tbody = $('#dataList tbody').empty()
        const q = ($val('.input-search .form-control') || '').toLowerCase()

        $(fields_data).each(function (idx, item) {
          if (q && !(item.fieldName.toLowerCase().contains(q) || item.fieldLabel.toLowerCase().contains(q))) return

          const $tr = $(`<tr data-id="${item.fieldId || ''}"></tr>`).appendTo($tbody)
          const $name = $(`<td><a href="field/${item.fieldName}" class="column-main">${item.fieldLabel}</a></td>`).appendTo($tr)
          if (item.fieldName === wpc.nameField) {
            $tr.addClass('primary')
            $(`<span class="badge badge-pill badge-secondary font-weight-light ml-1 pb-0">${$L('名称')}</span>`).appendTo($name)
          } else if (!item.creatable) {
            $tr.addClass('muted')
          } else if (!item.nullable) {
            $tr.addClass('danger')
          }
          $(`<td><div class="text-muted">${item.fieldName}</div></td>`).appendTo($tr)
          let dt = item.displayType
          if (item.displayTypeRef) dt += ` (${item.displayTypeRef[1]})`
          $(`<td><div class="text-muted">${dt}</div></td>`).appendTo($tr)
          $(`<td><div class="text-none" _title="${$L('无')}">${item.comments || ''}</div></td>`).appendTo($tr)
          $(`<td class="actions"><a class="icon J_edit" href="field/${item.fieldName}"><i class="zmdi zmdi-settings"></i></a></td>`).appendTo($tr)
        })

        $('.dataTables_info').text($L('共 %d 个字段', $tbody.find('tr').length))
        $('#dataList').parent().removeClass('rb-loading-active')
      }
    </script>
  </body>
</html>
